import 'package:cached_network_image/cached_network_image.dart';
import 'package:casdon/app/config/theme/theme_extention.dart';
import 'package:casdon/common/widget/generic_grid_item.dart';
import 'package:casdon/modules/recipe/data/model/recipe_placeholder_data.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

abstract class RecipeCategoryData {
  String get imgUrl;
  String get title;
  String get id;
  int get nodeType;
  int get sort;

  // 占位用的，
  RecipeCategoryData placeholder();
}

class RecipeCategoryItem extends StatelessWidget {
  final RecipeCategoryData item;
  final void Function(RecipeCategoryData item)? onTap;

  const RecipeCategoryItem({super.key, required this.item, this.onTap});

  @override
  Widget build(BuildContext context) {
    return GenericGridItem<RecipeCategoryData>(
      item: item,
      onTap: onTap,
      imageWidth: 40.w,
      imageHeight: 40.w,
      imageBuilder: (item) => CachedNetworkImage(
        imageUrl: item.imgUrl,
        fit: BoxFit.cover,
        fadeInDuration: Duration.zero, // 禁用淡入动画
        placeholder: (context, url) => const SizedBox(), // 不显示动画
        errorWidget: (context, url, error) {
          return Image.network(
            height: 40.w,
            width: 40.w,
            recipePlaceHolderImgUrl,
            fit: BoxFit.cover,
            errorBuilder: (context, error, stackTrace) {
              return Container(
                color: Colors.grey[200],
                child: const Icon(Icons.image_outlined, color: Colors.grey),
              );
            },
          );
        },
      ),
      titleBuilder: (item) => Text(
        item.title,
        style: context.textTheme.bodyMedium!.copyWith(
          color: context.customColorThemeNonNull.textColor1,
        ),
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      ),
    );
  }
}
